<template>
    <div class="classes-setting-wrap">
        <el-row class="add-btn">
            <el-button type="primary" icon="el-icon-plus" @click="openClassesInfo"></el-button>
        </el-row>
        <el-table
            v-loading="loading"
            ref="classesSettingTable"
            :data="tableData"
            style="width: 100%">
            <el-table-column prop="orderTimes" label="值班次序" width="100"></el-table-column>
            <el-table-column prop="orderName" label="班次名称"></el-table-column>
            <el-table-column prop="startTime" label="值班开始时间"></el-table-column>
            <el-table-column prop="endTime" label="值班结束时间"></el-table-column>
            <el-table-column prop="daysInterval" label="值班跨天"></el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="openClassesInfo(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="delClassesInfo(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 班次信息弹框 -->
        <el-dialog
            :close-on-click-modal="false"
            :title="dialogTitle"
            width="600px"
            top='10vh'
            v-if="dialogClassesInfo"
            :visible.sync="dialogClassesInfo"
            @close="closeClassesInfo"
            append-to-body
            v-dialogDrag>
            <classes-info-form :organizationId="organizationId" :oldInfo="currentClassesInfo" :closeFun="closeClassesInfo"></classes-info-form>
        </el-dialog>
    </div>
</template>
<script>
import * as Dao from '@/api/watch'
import classesInfoForm from './ClassesInfoForm'

export default {
    name: 'ClassesSetting',
    components: {
        classesInfoForm
    },
    props: {
        organizationId: {
            required: true
        }
    },
    data() {
        return {
            loading: false,
            tableData: [],
            dialogClassesInfo: false,
            currentClassesInfo: {},
            dialogTitle: '新增班次'
        }
    },
    created() {
        this.getClassesTable()
    },
    methods: {
        // 获取班次下拉框数据
        getClassesTable() {
            let that = this
            let parames = {
                organizationId: that.organizationId,
                sort: 'orderTimes',
                order: 'asc',
                offset: 0,
                limit: 20,
            }
            that.loading = true
            Dao.getClasses(parames).then(res => {
                that.tableData = res.data
                that.loading = false
            })
        },
        // 打开班次信息弹框
        openClassesInfo(row) {
            let that = this
            that.dialogClassesInfo = true
            if(row.id) {
                that.currentClassesInfo = row
                that.dialogTitle = '新增班次'
            } else {
                that.currentClassesInfo = {}
                that.dialogTitle = '编辑班次'
            }
        },
        // 关闭班次信息弹框
        closeClassesInfo(flag) {
            this.dialogClassesInfo = false
            // 数据有变动，刷新表格
            if(typeof(flag) !== 'object' && flag) {
                this.getClassesTable()
            }
        },
        // 删除班次信息
        delClassesInfo(row) {
            // 阻止事件冒泡
            event.stopPropagation()
            let that = this
            if (row) {
                this.$confirm('确认删除该班次吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    roundButton: true
                }).then(() => {
                    Dao.delClasses({id: row.id}).then(res => {
                        if( res.status === 200) {
                            that.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            // 刷新表格
                            that.getClassesTable()
                        }else{
                            that.$message.error(res.info)
                        }
                    })
                    // 阻止事件冒泡
                    event.stopPropagation()
                }).catch(() => {

                })
            }
        }
    }
}
</script>
<style lang="scss">
.classes-setting-wrap {
    .add-btn {
        margin-bottom: 15px;
    }
}
</style>

